<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{title}}</title>
        <link href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" rel="stylesheet">
        <link href="../../../static/bootstrap.min.css" rel="stylesheet">
        <link href="../../../static/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="../../../static/spoon.css" rel="stylesheet">
        <script src="../../../static/jquery.min.js"></script>
        <script src="../../../static/bootstrap.min.js"></script>
        <meta name="description" content="{{subtitle}}">
    </head>
    <body>
        <div class="container">
            <div class="hero-unit">
                <h1>{{title}}</h1>
                <p>{{subtitle}}</p>
            </div>
            <div class="row log">
                <div class="span12">
                    <table class="table table-striped table-hover table-condensed">
                        <thead>
                            <tr>
                                <th>Timestamp</th>
                                <th>Level</th>
                                <th>Tag</th>
                                <th>Message</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#log}}
                            <tr class="level-{{level}} {{rowClass}}">
                                <td>{{timestamp}}</td>
                                <td>{{level}}</td>
                                <td>{{tag}}</td>
                                <td>{{message}}</td>
                            </tr>
                            {{/log}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
